<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>Tables - Ace Admin</title>
    <meta name="description" content="Static &amp; Dynamic Tables" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/jquery-ui.min.css" />
    <!-- text fonts -->
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/fonts.googleapis.com.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <!--[if lte IE 9]>
      <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-rtl.min.css" />
    <!--[if lte IE 9]>
      <link rel="stylesheet" href="__PUBLIC__/Admin/assets/css/ace-ie.min.css" />
    <![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="__PUBLIC__/Admin/assets/js/ace-extra.min.js"></script>
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
      <script src="__PUBLIC__/Admin/assets/js/html5shiv.min.js"></script>
      <script src="__PUBLIC__/Admin/assets/js/respond.min.js"></script>
    <![endif]--></head>
  
  <body class="no-skin">
    <include file="Public/header" />
    <!-- /.header -->
    <div class="main-container ace-save-state" id="main-container">
      <script type="text/javascript">try {
          ace.settings.loadState('main-container')
        } catch(e) {}</script>
      <div id="sidebar" class="sidebar                  responsive                    ace-save-state">
        <script type="text/javascript">try {
            ace.settings.loadState('sidebar')
          } catch(e) {}</script>
        <div class="sidebar-shortcuts" id="sidebar-shortcuts">
          <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
            <button class="btn btn-success">
              <i class="ace-icon fa fa-signal"></i>
            </button>
            <button class="btn btn-info">
              <i class="ace-icon fa fa-pencil"></i>
            </button>
            <button class="btn btn-warning">
              <i class="ace-icon fa fa-users"></i>
            </button>
            <button class="btn btn-danger">
              <i class="ace-icon fa fa-cogs"></i>
            </button>
          </div>
          <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
            <span class="btn btn-success"></span>
            <span class="btn btn-info"></span>
            <span class="btn btn-warning"></span>
            <span class="btn btn-danger"></span>
          </div>
        </div>
        <!-- /.sidebar-shortcuts -->
        <include file="Public/navlist" />
        <!-- /.nva-list -->
        <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
          <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
        </div>
      </div>
      <div class="main-content">
        <div class="main-content-inner">
          <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
              <li>
                <i class="ace-icon fa fa-home home-icon"></i>
                <a href="#">主页</a></li>
              <li>
                <a href="#">博文</a></li>
          <!--<li class="active">Simple &amp; Dynamic</li></ul>-->            
<!-- /.breadcrumb -->
            <div class="nav-search" id="nav-search">
              <form class="form-search">
                <span class="input-icon">
                  <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                  <i class="ace-icon fa fa-search nav-search-icon"></i>
                </span>
              </form>
            </div>
            <!-- /.nav-search --></div>
          <div class="page-content">
            <div class="ace-settings-container" id="ace-settings-container">
              <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                <i class="ace-icon fa fa-cog bigger-130"></i>
              </div>
              <div class="ace-settings-box clearfix" id="ace-settings-box">
                <div class="pull-left width-50">
                  <div class="ace-settings-item">
                    <div class="pull-left">
                      <select id="skin-colorpicker" class="hide">
                        <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                        <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                        <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                        <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option></select>
                    </div>
                    <span>&nbsp; Choose Skin</span></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
                    <label class="lbl" for="ace-settings-navbar">Fixed Navbar</label></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
                    <label class="lbl" for="ace-settings-sidebar">Fixed Sidebar</label></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
                    <label class="lbl" for="ace-settings-breadcrumbs">Fixed Breadcrumbs</label></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
                    <label class="lbl" for="ace-settings-rtl">Right To Left (rtl)</label></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
                    <label class="lbl" for="ace-settings-add-container">Inside
                      <b>.container</b>
                    </label>
                  </div>
                </div>
                <!-- /.pull-left -->
                <div class="pull-left width-50">
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
                    <label class="lbl" for="ace-settings-hover">Submenu on Hover</label></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
                    <label class="lbl" for="ace-settings-compact">Compact Sidebar</label></div>
                  <div class="ace-settings-item">
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
                    <label class="lbl" for="ace-settings-highlight">Alt. Active Item</label></div>
                </div>
                <!-- /.pull-left --></div>
              <!-- /.ace-settings-box --></div>
            <!-- /.ace-settings-container -->
            <div class="hr hr-18 dotted hr-double"></div>
            <h4 class="pink">
              <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
              <a href="{:U('Article/articleAdd')}" role="button" class="blue">添加一篇新博文</a></h4>
            <div class="hr hr-18 dotted hr-double"></div>
            <!-- /.page-header -->
            <div class="row">
              <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="row">
                  <div class="col-xs-12">
                    <table id="simple-table" class="table  table-bordered table-hover">
                      <thead>
                        <tr>
                          <th class="center">
                            <label class="pos-rel">
                              <input type="checkbox" class="ace" />
                              <span class="lbl"></span>
                            </label>
                          </th>
                          <th>标题</th>
                          <th>头图</th>
                          <th>发布时间</th>
                          <th>排序</th>
                          <th class="hidden-480">点击量</th>
                          <th>是否显示</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
                        <foreach name="articleList" item="list" >
                        <tr>
                          <td class="center">
                            <label class="pos-rel">
                              <input type="checkbox" class="ace" />
                              <span class="lbl"></span>
                            </label>
                          </td>
                          <td>
                            <a href="#">{$list.article_title}</a>
                          </td>
                          <td>
                            <span>
                              <if condition="$list['article_img'] eq 0 ">
                                  <i class="ace-icon glyphicon glyphicon-picture"></i>
                                  <span>暂无图片</span>
                                <else />
                                <span class="ace-file-container hide-placeholder selected">
                                  <img style="width: 70px;height: 50px" src="__PUBLIC__/{:getConf('ARTICLE_IMG_FILENAME')}/{$list.article_img}">
                                </span>
                              </if>
                            </span>
                          </td>
                          <td>
                            <span>
                              {:date('Y-m-d H:i:s',$list['article_time'])}
                            </span>
                          </td>
                          <td>
                            <span>{$list.sort}</span>
                          </td>
                          <td>
                            <span>{$list.click}</span>
                          </td>
                          <td>
                            <span>
                                <if condition="$list['is_display'] eq 1 ">
                                    <i class="ace-icon glyphicon glyphicon-eye-open"></i>
                                  <else /> 
                                    <i class="ace-icon glyphicon glyphicon-eye-close"></i>
                                </if>
                            </span>
                          </td>
                          <td>
                            <div class="hidden-sm hidden-xs btn-group">
                              <button class="btn btn-xs btn-success">
                                <i class="ace-icon fa fa-check bigger-120"></i>
                              </button>
                              <a class="btn btn-primary btn-xs" href="{:U('Article/articleEditor',array('aid'=>$list['article_id']))}" target="_blank">
                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                              </a>
                              <a class="btn btn-xs btn-danger id-btn-dialog2" href="{:U('Article/articleDel',array('aid'=>$list['article_id']))}">
                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
                              </a>
                            </div>
                            <div class="hidden-md hidden-lg">
                              <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                  <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                  <li>
                                    <a href="#" class="tooltip-info" data-rel="tooltip" title="View">
                                      <span class="blue">
                                        <i class="ace-icon fa fa-search-plus bigger-120"></i>
                                      </span>
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">
                                      <span class="green">
                                        <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>
                                      </span>
                                    </a>
                                  </li>
                                  <li>
                                    <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">
                                      <span class="red">
                                        <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                      </span>
                                    </a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </foreach>
                      </tbody>
                      <div id="dialog-confirm" class="hide">
                        <div class="alert alert-info bigger-110">该文章将被永久删除，无法恢复。</div>
                        <div class="space-6"></div>
                        <p class="bigger-110 bolder center grey">
                          <i class="ace-icon fa fa-hand-o-right blue bigger-120"></i>你确定？</p>
                      </div>
                      <!-- #dialog-confirm --></table>
                  </div>
                  <!-- /.span --></div>
                <!-- /.row -->
                <!-- PAGE CONTENT ENDS --></div>
              <!-- /.col --></div>
            <!-- /.row --></div>
          <!-- /.page-content --></div>
      </div>
      <!-- /.main-content -->
      <include file="Public/footer" />
      <!-- ./footer -->
      <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
      </a>
    </div>
    <!-- /.main-container -->
    <!-- basic scripts -->
    <!--[if !IE]> -->
      <script src="__PUBLIC__/Admin/assets/js/jquery-2.1.4.min.js"></script>
      <!-- <![endif]-->
      <!--[if IE]>
        <script src="__PUBLIC__/Admin/assets/js/jquery-1.11.3.min.js"></script>
      <![endif]-->
      <script type="text/javascript">if ('ontouchstart' in document.documentElement) document.write("<script src='__PUBLIC__/Admin/assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");</script>
      <script src="__PUBLIC__/Admin/assets/js/bootstrap.min.js"></script>
      <!-- page specific plugin scripts -->
      <script src="__PUBLIC__/Admin/assets/js/jquery-ui.min.js"></script>
      <script src="__PUBLIC__/Admin/assets/js/jquery.ui.touch-punch.min.js"></script>
      <!-- ace scripts -->
      <script src="__PUBLIC__/Admin/assets/js/ace-elements.min.js"></script>
      <script src="__PUBLIC__/Admin/assets/js/ace.min.js"></script>
      <!-- inline scripts related to this page -->
      <script type="text/javascript">jQuery(function($) {

          $("#datepicker").datepicker({
            showOtherMonths: true,
            selectOtherMonths: false,
            //isRTL:true,

            /*
					changeMonth: true,
					changeYear: true,
					
					showButtonPanel: true,
					beforeShow: function() {
						//change button colors
						var datepicker = $(this).datepicker( "widget" );
						setTimeout(function(){
							var buttons = datepicker.find('.ui-datepicker-buttonpane')
							.find('button');
							buttons.eq(0).addClass('btn btn-xs');
							buttons.eq(1).addClass('btn btn-xs btn-success');
							buttons.wrapInner('<span class="bigger-110" />');
						}, 0);
					}
			*/
          });

          //override dialog's title function to allow for HTML titles
          $.widget("ui.dialog", $.extend({},
          $.ui.dialog.prototype, {
            _title: function(title) {
              var $title = this.options.title || '&nbsp;'
              if (("title_html" in this.options) && this.options.title_html == true) title.html($title);
              else title.text($title);
            }
          }));

          $("#id-btn-dialog1").on('click',
          function(e) {
            e.preventDefault();

            var dialog = $("#dialog-message").removeClass('hide').dialog({
              modal: true,
              title: "<div class='widget-header widget-header-small'><h4 class='smaller'><i class='ace-icon fa fa-check'></i> jQuery UI Dialog</h4></div>",
              title_html: true,
              buttons: [{
                text: "Cancel",
                "class": "btn btn-minier",
                click: function() {
                  $(this).dialog("close");
                }
              },
              {
                text: "OK",
                "class": "btn btn-primary btn-minier",
                click: function() {
                  $(this).dialog("close");
                }
              }]
            });

            /**
					dialog.data( "uiDialog" )._title = function(title) {
						title.html( this.options.title );
					};
					**/
          });

          $(".id-btn-dialog2").on('click',
          function(e) {
            var del_path = $(this).attr('href');
            e.preventDefault();

            $("#dialog-confirm").removeClass('hide').dialog({
              resizable: false,
              width: '320',
              modal: true,
              title: "<div class='widget-header'><h4 class='smaller'><i class='ace-icon fa fa-exclamation-triangle red'></i> 清空回收站？</h4></div>",
              title_html: true,
              buttons: [{
                html: "<i class='ace-icon fa fa-trash-o bigger-110'></i>&nbsp; 删除",
                "class": "btn btn-danger btn-minier",
                click: function() {
                 $(location).attr('href',del_path);
                }
              },
              {
                html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",
                "class": "btn btn-minier",
                click: function() {
                  $(this).dialog("close");
                }
              }]
            });
          });

          //autocomplete
          var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
          $("#tags").autocomplete({
            source: availableTags
          });

          //custom autocomplete (category selection)
          $.widget("custom.catcomplete", $.ui.autocomplete, {
            _create: function() {
              this._super();
              this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
            },
            _renderMenu: function(ul, items) {
              var that = this,
              currentCategory = "";
              $.each(items,
              function(index, item) {
                var li;
                if (item.category != currentCategory) {
                  ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                  currentCategory = item.category;
                }
                li = that._renderItemData(ul, item);
                if (item.category) {
                  li.attr("aria-label", item.category + " : " + item.label);
                }
              });
            }
          });

          var data = [{
            label: "anders",
            category: ""
          },
          {
            label: "andreas",
            category: ""
          },
          {
            label: "antal",
            category: ""
          },
          {
            label: "annhhx10",
            category: "Products"
          },
          {
            label: "annk K12",
            category: "Products"
          },
          {
            label: "annttop C13",
            category: "Products"
          },
          {
            label: "anders andersson",
            category: "People"
          },
          {
            label: "andreas andersson",
            category: "People"
          },
          {
            label: "andreas johnson",
            category: "People"
          }];
          $("#search").catcomplete({
            delay: 0,
            source: data
          });

          //tooltips
          $("#show-option").tooltip({
            show: {
              effect: "slideDown",
              delay: 250
            }
          });

          $("#hide-option").tooltip({
            hide: {
              effect: "explode",
              delay: 250
            }
          });

          $("#open-event").tooltip({
            show: null,
            position: {
              my: "left top",
              at: "left bottom"
            },
            open: function(event, ui) {
              ui.tooltip.animate({
                top: ui.tooltip.position().top + 10
              },
              "fast");
            }
          });

          //Menu
          $("#menu").menu();

          //spinner
          var spinner = $("#spinner").spinner({
            create: function(event, ui) {
              //add custom classes and icons
              $(this).next().addClass('btn btn-success').html('<i class="ace-icon fa fa-plus"></i>').next().addClass('btn btn-danger').html('<i class="ace-icon fa fa-minus"></i>')

              //larger buttons on touch devices
              if ('touchstart' in document.documentElement) $(this).closest('.ui-spinner').addClass('ui-spinner-touch');
            }
          });

          //slider example
          $("#slider").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300]
          });

          //jquery accordion
          $("#accordion").accordion({
            collapsible: true,
            heightStyle: "content",
            animate: 250,
            header: ".accordion-header"
          }).sortable({
            axis: "y",
            handle: ".accordion-header",
            stop: function(event, ui) {
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children(".accordion-header").triggerHandler("focusout");
            }
          });
          //jquery tabs
          $("#tabs").tabs();

          //progressbar
          $("#progressbar").progressbar({
            value: 37,
            create: function(event, ui) {
              $(this).addClass('progress progress-striped active').children(0).addClass('progress-bar progress-bar-success');
            }
          });

          //selectmenu
          $("#number").css('width', '200px').selectmenu({
            position: {
              my: "left bottom",
              at: "left top"
            }
          })

        });</script>
  </body>

</html>